﻿
@{
    ViewData["Title"] = "Viper智能自由（Viper）";
}

<script src="~/js/jquery.min.js"></script>
@*<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>*@
<script src="~/js/base.js"></script>


<!-- 先引入 Vue -->
<script src="~/js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="~/js/element-ui-index.js"></script>
<!-- 引入样式 -->
<link href="~/css/element-ui-index.css" rel="stylesheet" />
<!-- 生产环境版本，优化了尺寸和速度 -->
@*<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>*@
<!-- 引入样式 -->
@*<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.14.0/lib/theme-chalk/index.css">*@
<!-- 引入组件库 -->
@*<script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.0/lib/index.js"></script>*@

<script src="~/js/httpVue/bluebird.min.js"></script>
<script src="~/js/httpVue/httpVueLoader.min.js"></script>

<div id="app" style="height:100%;display:none;">
    <el-container>
        <el-container>
            <el-aside style="background-color: #545c64;" v-bind:style="{width:menumWidth}">
                <div :class="{pc_menum:!isMobile,mobile_menum:isMobile}">
                    <el-menu :class="'el-menu'+menumWidth" :collapse="isCollapse" background-color="#001529" text-color="#fff" >
                        <el-radio-group v-model="isCollapse" v-bind:style="{width:menumWidth}" style="height: 60px; background-color: #002140; text-align: center;">
                            <img src="~/img/logo.jpg" v-on:click="changeisCollapse" style="width: 48px; height: 48px; padding-top:6px; border: 2px; border-radius: 22.5px; -moz-border-radius: 25px; vertical-align: middle;" />
                            <span v-show="!isCollapse" style="font-size: 14px; color: white; font-weight: bold;margin-left: 3px; vertical-align: middle;">Viper&Anno</span>
                        </el-radio-group>
                        <el-submenu v-for="item,index in menuroot" :index="item.id">
                            <template slot="title">
                                <i :class="(item.icon==null||item.icon=='')?'el-icon-folder':item.icon"></i>
                                <span slot="title">{{item.fname}}</span>
                            </template>
                            <el-menu-tree :item="item"></el-menu-tree>
                        </el-submenu>
                    </el-menu>
                </div>
            </el-aside>
            <el-main style="width: 100%; height: 100%; top: 0px; left: 0px;">
                <el-header>
                    <div v-on:click="changeisCollapse" style="width: 1px; float: left; cursor: pointer;">
                        <i :class="{'el-icon-s-fold':isCollapse==false,'el-icon-s-unfold':isCollapse}"></i>
                    </div>
                    <a v-show="!isMobile" style="cursor: pointer; text-decoration: underline; float:left;margin-left:40px;color:#3e3434;" target="_blank" href="https://duyanming.github.io/">官方文档</a>
                    <div uInfo style="height: 60px; float: right; margin-right:10px;">
                        <el-tag v-show="!isMobile">
                            系统：
                            <span style="color:#606266;">
                                @($"{System.Environment.OSVersion}"),<b>@System.Runtime.InteropServices.RuntimeInformation.OSArchitecture.ToString().ToLower()</b>,处理器 <b>@System.Environment.ProcessorCount</b>
                            </span>
                         </el-tag>
                        <el-tag v-show="!isMobile">注册中心：<span style="color:#606266;">@(Anno.Const.SettingService.Local?.IpAddress + ":" + Anno.Const.SettingService.Local?.Port)</span></el-tag>
                        <el-tag v-show="!isMobile">运行服务：<span style="color:#606266;">@Anno.Rpc.Client.Connector.Micros?.LongCount()</span></el-tag>
                        <el-tag v-show="!isMobile">网关版本：<span style="color:#606266;">@(typeof(Anno.Rpc.Client.Connector).Assembly.GetName().Version)</span></el-tag>
                        <el-avatar size="medium" style="vertical-align: middle;">{{profile.account}}</el-avatar>
                        <el-dropdown trigger="click" @@command="handleCommand">
                            <span class="el-dropdown-link">
                                {{profile.name}}<i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="openUserCenter">个人中心</el-dropdown-item>
                                <el-dropdown-item divided command="exitUser">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                <el-container>
                    <el-tabs v-model="activeName" @@tab-remove="removeTab" style="width:100%">
                        <el-tab-pane v-for="(item, index) in tabs"
                                     :key="item.name"
                                     :label="item.name"
                                     :name="item.name"
                                     :closable="item.closable">
                            <el-container v-loading="item.loading">
                                <iframe :id="item.id" @@load="tabOnLoad" frameborder="0" :src="item.src" style="width: 100%; height: calc(100% - 87px);">
                                </iframe>
                            </el-container>
                        </el-tab-pane>
                    </el-tabs>
                </el-container>
            </el-main>
        </el-container>
    </el-container>
</div>
<script>
    if (anno.input.profile === undefined || localStorage.profile === undefined) {
        window.location.href = "/Home/Login";
    }
    var _isCollapse = false, _isMobile = false, _menumWidth = "200px";
    if (isMobile()) {
        _isCollapse = true;
        _isMobile = true;
        _menumWidth = "64px";
    }
    Vue.config.productionTip = false;
    Vue.config.devtools = false;

    Vue.use(httpVueLoader);

    var vm = new Vue({
        el: '#app',
        data: {
            activeName:"Dashboard",
            isCollapse: _isCollapse,
            isMobile: _isMobile,
            menumWidth: _menumWidth,
            profile: JSON.parse(localStorage.profile),
            menuroot: [],
            tabs: [
                { id: "dashboard", name: "Dashboard", closable:false, src: "html/welcome.html?appName=@(Anno.Const.SettingService.AppName)", loading:false}
            ]
        },
        created: function () {//用于数据初始化
            var that = this;
            if (anno.input.profile === undefined || localStorage.profile === undefined) {
                window.location.href = "/Home/Login";
            }
            var input = anno.getInput();
            anno.ajaxpara.async = false;
            anno.process(input,"Anno.Plugs.Logic/Platform/GetUsrFc", function (data) {
                that.menuroot = data.outputData;
                that.getFunc();
            }, function (data) {
                if (!data.status) {
                    localStorage.clear();
                    window.location.href = "/Home/Login";
                }
            });
            anno.ajaxpara.async = true;
            $("#app").css("display", "");
        },
        methods: {
            handleCommand: function (command) {
                if (command === "openUserCenter") {
                    this.openUserCenter();
                } else if (command === "exitUser") {
                    this.exitUser();
                }
            },
            removeTab: function (targetName) {
                var that = this;
                let tabs = that.tabs;
                let activeName = that.activeName;
                if (activeName === targetName) {
                    for (var i = 0; i < tabs.length; i++) {
                        var tab = tabs[i];
                        var index = i;
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    }
                }
                that.activeName = activeName;
                var _tabs = [];
                for (var i = 0; i < tabs.length; i++) {
                    if (tabs[i].name !== targetName) {
                        _tabs.push(tabs[i]);
                    }
                }
                that.tabs = _tabs;
                if (that.tabs.length === 1) {
                    that.tabs[0].closable = false;
                } else {
                    for (var i = 0; i < that.tabs.length; i++) {
                        that.tabs[i].closable = true;
                    }
                }
            },
            changeisCollapse: function () {
                var that = this;
                that.isCollapse = (that.isCollapse == false);
                if (that.isCollapse === true) {
                    that.menumWidth = "64px";
                } else {
                    that.menumWidth = "200px";
                }
            },
            tabOnLoad: function (ev) {
                var id = ev.srcElement.id;
                var that = this;
                for (var i = 0; i < that.tabs.length; i++) {
                    if (that.tabs[i].id === id) {
                        that.tabs[i].loading = false;
                    }
                }
            },
            openMenuItem: function (item) {
                var that = this;
                var alreadyOpen = false;
                for (var i = 0; i < that.tabs.length; i++) {
                    if (that.tabs[i].id === item.id) {
                        alreadyOpen = true;
                    }
                }
                if (alreadyOpen == true) {
                    that.activeName = item.fname;
                    return;
                }
                var tab = { id: "dashboard", name: "Dashboard", closable: true, src: "html/welcome.html?appName=@(Anno.Const.SettingService.AppName)", loading: true };
                tab.id = item.id;
                tab.name = item.fname;
                tab.src = item.furl;
                that.tabs.push(tab);
                that.activeName = item.fname;

                if (that.tabs.length === 1) {
                    that.tabs[0].closable = false;
                } else {
                    for (var i = 0; i < that.tabs.length; i++) {
                        that.tabs[i].closable = true;
                    }
                }
            },
            exitUser: function () {
                this.$confirm("确定退出？", "退出登录", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    localStorage.clear();
                    anno.input.profile = undefined;
                    anno.input.uname = undefined;
                    window.location.href = "/Home/Login";
                });
            },
            openUserCenter: function () {
                this.openMenuItem({ id: "pcenter", fname: "个人中心", furl: "html/component.html?anno_component_name=anno-user-center"});
            },
            getFunc: function () {
                var that = this;
                var input = anno.getInput();
                anno.ajaxpara.async = false;
                anno.process(input,"Anno.Plugs.Logic/Platform/GetFunc", function (data) {
                    that.InitMenuRoot(data.outputData);
                });
            },
            InitMenuRoot: function (sub_menu) {
                var that = this;
                for (var mr in this.menuroot) {
                    this.getChildren(that.menuroot[mr], sub_menu);
                }
            },
            getChildren: function (mr, sub_menu) {
                var children = [];
                var childrenDir = [];
                for (var index in sub_menu) {
                    let item = sub_menu[index];
                    if (item.pid == mr.id) {
                        this.getChildren(item, sub_menu);
                        if (item.children.length <= 0) {
                            children.push(item);
                        } else {
                            childrenDir.push(item);
                        }
                    }
                }
                mr.children = children;
                mr.childrenDir = childrenDir;
            },
            notify: function (msg) {
                var notifyMsg = '给我点点小星星吧，谢谢你的支持!<br/><iframe frameborder="0" src="http://ghbtns.com/github-btn.html?user=duyanming&repo=viper&type=watch&count=true" width="105" height="20"></iframe>' +
                    '<iframe frameborder="0" src="http://ghbtns.com/github-btn.html?user=duyanming&repo=viper&type=fork&count=true" width="105" height="20" ></iframe>';
                if (msg != undefined && msg != null && msg != "") {
                    notifyMsg = msg;
                }
                this.$notify.info({
                    title: 'Hello, my friend',
                    dangerouslyUseHTMLString: true,
                    message: notifyMsg,
                    position: 'bottom-right'
                });
            }
        },
        components: {
            'el-menu-tree': httpVueLoader('/component/el-menu-tree.vue')
        }
    });

    // 判断浏览器函数
    function isMobile() {
        if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
            return true;  // 移动端
        } else {
            return false;  // PC端
        }
    }
    var inter;
    var count = 4;
    $(function () {
        setTimeout("notifysetInterval()", 1000);
        inter = self.setInterval("notifysetInterval()", 15000);
    });
    function notifysetInterval() {
        try {
            vm.notify();
            count--;
            if (count <= 0) {
                inter = window.clearInterval(inter);
            }
        } catch (ex) { console.log(ex); }
    }
</script>
<style>
    .pc_menum {
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .mobile_menum {
        height: 100%;
        position: relative;
    }

    .el-tabs__header {
        padding-left: 20px;
    }

    .el-tabs__content {
        height: calc(100% - 13px);
    }

    .el-tab-pane {
        height: 100%;
    }

    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        margin: 0px 0px;
    }

    div[uInfo] {
        margin-left: 10px;
    }

    .el-header {
        padding: 0 0px;
        background-color: #fff;
        color: #333;
        left: 20px;
        line-height: 60px;
        border-bottom: 1px solid #e6e6e6;
        /*box-shadow: 0px 5px 2px rgba(0,21,41,.35);*/
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        /*overflow: hidden;*/
        /*width:200px;*/
        /*box-shadow: 2px 0 6px rgba(0,21,41,.35);*/
    }

    .el-submenu__icon-arrow {
        right: 40px;
    }

    .el-menu200px {
        border-right: solid 0px #e6e6e6;
        /*width: 220px;*/
        height: 100%;
        position: absolute;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .el-menu64px {
        border-right: solid 0px #e6e6e6;
        /*width: 220px;*/
        height: 100%;
    }

    .el-container {
        height: 100%;
    }

    .el-main {
        color: #333;
        text-align: center;
        padding: 0 0;
        overflow-y: hidden;
        /*margin-left: 8px;*/
    }
    .el-tabs__header {
        margin: 0px;
    }
</style>

